<template>
  <div class="handle">
    <c-list ref="form" :column="3" label-width="140px">
      <c-list-item label="任务类型" dict-type-code="TASK_TYPE" :value="detail.taskType" />
      <c-list-item label="任务来源" dict-type-code="DATA_SOURCE" :value="detail.dataSource" />
      <c-list-item label="任务来源单据" clickable :value="detail.sourceCode" @click.native="toSource(detail.sourceCode)" />
      <c-list-item label="门店建设项目号" :value="detail.constCode" />
      <c-list-item label="设计范围" dict-type-code="DECORATION_RANGE" :value="designDetail.designRange || detail.decorationRange" />
      <c-list-item label="装修形式" dict-type-code="DECORATION_FORM" :value="detail.decorationType || detail.decorationForm" />
      <c-list-item label="所属门店编码" :value="shopDetail.shopCode" />
      <c-list-item label="所属门店" :value="shopDetail.shopName" />
      <c-list-item label="所属客户编码" :value="shopDetail.clientCode" />
      <c-list-item label="所属客户" :value="shopDetail.clientName" />
      <c-list-item label="所属办事处" :value="shopDetail.officeName" />
      <c-list-item label="是否需要复尺" dict-type-code="BOOLEANS" :value="detail.isNeedResurvey" />
      <c-list-item label="是否完成复尺" dict-type-code="BOOLEANS" :value="detail.isEndResurvey" />
      <c-list-item label="不复尺设计摆场" dict-type-code="UNRESURVEY_STATE" :value="detail.unresurveyDesignSetup" />
      <c-list-item label="不复尺设计施工" dict-type-code="UNRESURVEY_STATE" :value="detail.unresurveyDesignConst" />
    </c-list>
    <!-- 十月优化START -->
    <Area :detail="detail" :pic-detail="picDetail" :design-detail="designDetail" />
    <!-- 十月优化END -->
    <c-list ref="form" :column="3" label-width="140px">
      <c-list-item label="申请说明" :span="3" :value="detail.taskDesc" />
      <c-list-item label="任务分配结果" dict-type-code="DISTRIBUTE_RESULT" :value="detail.distributeResult" />
      <c-list-item label="任务分配人" :value="detail.distributorName" />
      <c-list-item label="任务分配时间" :format-time="false" :value="detail.distributeTime" />
      <c-list-item label="卖场预计设计完成时间" :value="detail.marketExpectCompleteTime" />
      <c-list-item label="门头预计设计完成时间" :value="detail.dheadExpectCompleteTime" />
      <c-list-item label="是否重点市场" dict-type-code="BOOLEANS" :value="detail.isFocusMarket" />
      <c-list-item label="店面等级" dict-type-code="SHOP_LEVEL_CODE" :value="detail.shopLevelCode" />
      <c-list-item label="是否含重复设计" dict-type-code="BOOLEANS" :value="detail.haveRedesign" />
      <c-list-item label="是否需要门头效果图" dict-type-code="BOOLEANS" :value="designDetail.isNeedRendering" />
      <c-list-item label="任务处理方式" :span="3">
        <el-checkbox-group v-model="taskHandelWay">
          <el-checkbox v-for="ht in handleTypeList" :key="ht.dictCode" :label="ht.dictCode">{{ ht.dictName }}</el-checkbox>
        </el-checkbox-group>
      </c-list-item>
    </c-list>
    <c-section v-if="taskHandelWay.includes('CREATION')" title="新增图纸">
      <c-table-box index checkbox hide-func :table-height="400" :table-row-key="tableRowKeyFun" :data="tableData" :table-config="tableConfig" @selection-change="selectionChange">
        <template #btn>
          <c-button type="primary" @click="addHandle">新增</c-button>
          <c-button type="primary" @click="removeHandle">删除</c-button>
        </template>
      </c-table-box>
    </c-section>
    <c-section v-if="taskHandelWay.includes('UPDATES')" title="修改图纸">
      <c-table-box index hide-func :setting="false" auto-height :table-row-key="tableRowKeyFun" :table-height="400" :data="editTableData" :table-config="editTableConfig" @selection-change="editSelectionChange" />
    </c-section>
    <div class="btn-container">
      <c-button type="default" @click="cancelHandle">取消</c-button>
      <c-button type="primary" @click="submitHandle">提交</c-button>
    </div>
  </div>
</template>
<script>
import { SLMDict } from '@/api/dataDict'
import { otherFiltersItem, deepClone } from '@/utils'
import { getShopDesignTaskInfo, shopConstructPage, getShopDesignTaskWholeInfo, putTaskHandle, basicsInfo, postGetPicture, postGetPicturePage, getShopDesignInfo } from '@/api/shopDesignTask'
import { getPath, getPicturePage } from './getPath'
import { concatObj } from '@/utils'
import getBizType from '@/views/shopDrawing/js/spaceBiz'
import Area from './components/Area'
export default {
  name: 'ShopDesignTaskHandle',
  components: {
    Area
  },
  data() {
    return {
      allConfigArea: [],
      taskHandelWay: [],
      taskDetail: {},
      designDetail: {},
      picDetail: {},
      shopDetail: {},
      wholeInfo: {},
      TASK_HANDEL_WAY: [],
      tableData: [],
      tableConfig: {
        setting: [
          {
            prop: 'picType',
            label: '图纸类型',
            minWidth: '120',
            render: (h, row) => {
              return h('c-dict-select', {
                props: {
                  dictTypeCode: 'PIC_TYPE',
                  value: row.picType,
                  exclude: this.excludePicType
                },
                on: {
                  input: v => {
                    this.$set(row, 'picType', v)
                    if ((v === 'PB' && row.designRange === 'STORES') || (['GH', 'BC'].includes(v) && row.designRange === 'DOOR')) {
                      this.$set(row, 'designRange', '')
                    }
                  }
                }
              })
            }
          },
          {
            prop: 'picTaskName',
            label: '图纸名称',
            minWidth: '120',
            render: (h, row) => {
              return h('el-input', {
                props: {
                  placeholder: '图纸名称',
                  value: row.picTaskName
                },
                on: {
                  input: v => {
                    this.$set(row, 'picTaskName', v)
                  }
                }
              })
            }
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: '180',
            render: (h, row) => {
              return h('c-dict-select', {
                props: {
                  dictTypeCode: 'DECORATION_RANGE',
                  value: row.designRange,
                  include: this.includeDesignRange(row),
                  multiple: false
                },
                style: {
                  width: '100%'
                },
                attrs: {
                },
                on: {
                  input: v => {
                    this.$set(row, 'designRange', v)
                  },
                  change: v => {
                    if (v === 'DOOR') {
                      // this.$set(row, 'NEWdecorationType', ['PACKAGE'])
                      this.$set(row, 'NEWdecorationType', 'PACKAGE')
                      this.$set(row, 'NEWdesignSpace', [])
                      this.$set(row, 'NEWdesignBizType', [])
                    } else {
                      // this.$set(row, 'NEWdecorationType', [])
                      this.$set(row, 'NEWdecorationType', '')
                    }
                  }
                }
              })
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: '180',
            render: (h, row) => {
              return h('c-dict-select', {
                props: {
                  dictTypeCode: 'DECORATION_FORM',
                  value: row.NEWdecorationType,
                  include: this.detail.decorationType || this.detail.decorationForm || this.shopDetail.decorationForm || '',
                  // value: row.decorationType,
                  multiple: false
                },
                style: {
                  width: '100%'
                },
                attrs: {
                  disabled: row.designRange === 'DOOR'
                },
                on: {
                  input: v => {
                    // this.$set(row, 'decorationType', v)
                    this.$set(row, 'NEWdecorationType', v)
                  }
                }
              })
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: '180',
            render: (h, row) => {
              if (!this.editabled(row)) {
                return h('c-remote-select', {
                  props: {
                    value: row.NEWdesignSpace,
                    url: '/api/v1/configArea/page',
                    labelName: 'areaName',
                    valueName: 'areaCode',
                    method: 'POST',
                    multiple: true,
                    filtersRaw: this.addFiltersRaw
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'NEWdesignSpace', v)
                    },
                    change: v => {
                      this.$set(row, 'NEWdesignBizType', getBizType(v))
                    }
                  }
                })
              }
              return h('span', '')
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: '180',
            render: (h, row) => {
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'BIZ_TYPE',
                  value: (row.NEWdesignBizType || []).join(',')
                }
              })
            }
          },
          {
            prop: 'picTotalArea',
            label: '图纸总面积',
            minWidth: '120',
            render: (h, row) => {
              return h('c-input-number', {
                props: {
                  float: true,
                  value: row.picTotalArea
                },
                on: {
                  input: v => {
                    this.$set(row, 'picTotalArea', v)
                  }
                }
              })
            }
          },
          {
            prop: 'softwareSumArea',
            label: '软体区总面积',
            minWidth: '120',
            render: (h, row) => {
              if (!this.editabled(row)) {
                return h('c-input-number', {
                  props: {
                    float: true,
                    value: row.softwareSumArea
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'softwareSumArea', v)
                    }
                  }
                })
              }
              return h('span', '')
            }
          },
          {
            prop: 'suiteSumArea',
            label: '套房区总面积',
            minWidth: '120',
            render: (h, row) => {
              if (!this.editabled(row)) {
                return h('c-input-number', {
                  props: {
                    float: true,
                    value: row.suiteSumArea
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'suiteSumArea', v)
                    }
                  }
                })
              }
              return h('span', '')
            }
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            minWidth: '120',
            render: (h, row) => {
              if (!this.editabled(row)) {
                return h('c-dict-select', {
                  props: {
                    dictTypeCode: 'BOOLEANS',
                    value: row.haveEAndC
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'haveEAndC', v)
                    }
                  }
                })
              }
              return h('span', '')
            }
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: '120',
            render: (h, row) => {
              if (!this.editabled(row)) {
                return h('c-input-number', {
                  props: {
                    float: true,
                    value: row.eandCArea
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'eandCArea', v)
                    }
                  }
                })
              }
              return h('span', '')
            }
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务总面积',
            minWidth: '120',
            render: (h, row) => {
              if (!this.editabled(row)) {
                return h('c-input-number', {
                  props: {
                    float: true,
                    value: row.newBusinessAreaSummary
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'newBusinessAreaSummary', v)
                    }
                  }
                })
              }
              return h('span', '')
            }
          },
          {
            prop: 'isRedesign',
            label: '是否重复设计',
            minWidth: '120',
            render: (h, row) => {
              const that = this
              if (this.isRedesignEditable) {
                // this.$set(row, 'isRedesign', '')
                return h('c-dict-select', {
                  props: {
                    dictTypeCode: 'BOOLEANS',
                    value: row.isRedesign
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'isRedesign', v)
                    }
                  }
                })
              }
              this.$set(row, 'isRedesign', that.detail.haveRedesign || 0)
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'BOOLEANS',
                  value: row.isRedesign
                }
              })
            }
          },
          {
            prop: 'sourcePic',
            label: '来源图纸',
            minWidth: '180',
            render: (h, row) => {
              return h('input-with-dialog', {
                props: {
                  props: { label: 'picTaskName', value: 'picTaskCode' },
                  multiple: true,
                  value: [{ picTaskName: row.sourcePicName, picTaskCode: row.sourcePic }],
                  config: {
                    title: '来源图纸',
                    width: '600px',
                    interfacePath: '/slm-admin/api/v1/shopDesignPicture/getPicture/page1',
                    method: 'post',
                    filtersRaw: [
                      otherFiltersItem('constCode', this.detail.constCode, '='),
                      otherFiltersItem('state', 'CANCELLATION', '<>'),
                      otherFiltersItem('dr', 0, '=')
                    ],
                    paramsRaw: {},
                    setting: [
                      { prop: 'picTaskCode', title: '编码', width: 80 },
                      { prop: 'picTaskName', title: '图纸名称', width: 200 }
                    ]
                  }
                },
                on: {
                  change: v => {
                    this.$set(row, 'sourcePic', v.map(e => e.picTaskCode).join(','))
                    this.$set(row, 'sourcePicName', v.map(e => e.picTaskName).join(','))
                  }
                }
              })
            }
          },
          {
            prop: 'designerCode',
            label: '设计师',
            minWidth: '180',
            render: (h, row) => {
              return h('c-single-dialog', {
                props: {
                  value: row.designerCode,
                  label: row.designerName,
                  props: { label: 'userName', value: 'account' }
                },
                style: {
                  width: '100%'
                },
                attrs: {
                  focusQuery: true,
                  config: {
                    title: '设计师',
                    width: '600px',
                    interfacePath: `/slm-admin/api/v1/user/listUsersByOrgCodes?domainCode=marketing`,
                    method: 'post',
                    filtersRaw: [],
                    paramsRaw: { orgCodes: [this.$route.query.unitCode] },
                    setting: [
                      { prop: 'account', title: '编码', width: 80 },
                      { prop: 'userName', title: '名称', width: 200 }
                    ]
                  }
                },
                on: {
                  change: v => {
                    this.$set(row, 'designerName', v.userName)
                    this.$set(row, 'designerCode', v.account)
                  }
                }
              })
            }
          }
        ]
      },
      selections: [],
      editTableConfig: {
        setting: [
          {
            prop: 'picType',
            label: '图纸类型',
            width: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            }
          },
          {
            prop: 'picTaskName',
            label: '图纸名称',
            width: 120
          },
          {
            prop: 'picTaskCode',
            label: '图纸任务号',
            width: 120
          },
          {
            prop: 'designRange',
            label: '设计范围',
            width: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'DECORATION_RANGE'
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: '160',
            render: (h, row) => {
              return h('c-design-area', {
                props: {
                  value: row.designSpace
                }
              })
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   return h('c-remote-select', {
              //     props: {
              //       value: row.NEWdesignSpace,
              //       url: '/api/v1/configArea/page',
              //       labelName: 'areaName',
              //       valueName: 'areaCode',
              //       method: 'POST',
              //       multiple: true,
              //       filtersRaw: [
              //         { key: 'enable', value: 1, operator: '=' },
              //         { key: 'dr', value: 0, operator: '=' }
              //       ]
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWdesignSpace', v)
              //       },
              //       change: v => {
              //         this.$set(row, 'NEWdesignBizType', getBizType(v))
              //       }
              //     }
              //   })
              // } else {
              //   return h('c-design-area', {
              //     props: {
              //       value: row.designSpace
              //     }
              //   })
              // }
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: '180',
            render: (h, row) => {
              let designBizType = []
              designBizType = this.$split(row.designBizType)
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'BIZ_TYPE',
                  value: designBizType.join(',')
                }
              })
              // let designBizType = []
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   designBizType = row.NEWdesignBizType || []
              // } else {
              // designBizType = this.$split(row.designBizType)
              // }
              // return h('c-dict-range-view', {
              //   props: {
              //     dictTypeCode: 'BIZ_TYPE',
              //     value: designBizType.join(',')
              //   }
              // })
            }
          },
          {
            prop: 'picTotalArea',
            label: '图纸总面积',
            minWidth: '120',
            render: (h, row) => {
              return h('span', row.picTotalArea)
              // if (row.taskHandleType.includes('0')) {
              //   return h('c-input-number', {
              //     props: {
              //       float: true,
              //       value: row.NEWpicTotalArea
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWpicTotalArea', v)
              //       }
              //     }
              //   })
              // } else {
              //   return h('span', row.picTotalArea)
              // }
            }
          },
          {
            prop: 'softwareSumArea',
            label: '软体区总面积',
            minWidth: '120',
            render: (h, row) => {
              return h('span', row.softwareSumArea)
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   return h('c-input-number', {
              //     props: {
              //       float: true,
              //       value: row.NEWsoftwareSumArea
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWsoftwareSumArea', v)
              //       }
              //     }
              //   })
              // } else {
              //   return h('span', row.softwareSumArea)
              // }
            }
          },
          {
            prop: 'suiteSumArea',
            label: '套房区总面积',
            minWidth: '120',
            render: (h, row) => {
              return h('span', row.suiteSumArea)
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   return h('c-input-number', {
              //     props: {
              //       float: true,
              //       value: row.NEWsuiteSumArea
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWsuiteSumArea', v)
              //       }
              //     }
              //   })
              // } else {
              //   return h('span', row.suiteSumArea)
              // }
            }
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务总面积',
            minWidth: '120',
            render: (h, row) => {
              return h('span', row.newBusinessAreaSummary)
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   return h('c-input-number', {
              //     props: {
              //       float: true,
              //       value: row.NEWnewBusinessAreaSummary
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWnewBusinessAreaSummary', v)
              //       }
              //     }
              //   })
              // } else {
              //   return h('span', row.newBusinessAreaSummary)
              // }
            }
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            minWidth: '120',
            render: (h, row) => {
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'BOOLEANS',
                  value: row.haveEAndC
                }
              })
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   return h('c-dict-select', {
              //     props: {
              //       dictTypeCode: 'BOOLEANS',
              //       value: row.NEWhaveEAndC
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWhaveEAndC', v)
              //       }
              //     }
              //   })
              // } else {
              //   return h('c-dict-range-view', {
              //     props: {
              //       dictTypeCode: 'BOOLEANS',
              //       value: row.haveEAndC
              //     }
              //   })
              // }
            }
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: '120',
            render: (h, row) => {
              return h('span', row.eandCArea)
              // if (row.taskHandleType.includes('0') && this.updateEditabled(row)) {
              //   return h('c-input-number', {
              //     props: {
              //       float: true,
              //       value: row.NEWeandCArea
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWeandCArea', v)
              //       }
              //     }
              //   })
              // } else {
              //   return h('span', row.eandCArea)
              // }
            }
          },
          {
            prop: 'isRedesign',
            label: '是否重复设计',
            minWidth: '120',
            render: (h, row) => {
              // this.$set(row, 'isRedesign', '0')
              return h('c-dict-range-view', {
                props: {
                  dictTypeCode: 'BOOLEANS',
                  value: row.isRedesign
                }
              })
              // if (row.taskHandleType.includes('0') && this.isRedesignEditable) {
              //   this.$set(row, 'NEWisRedesign', '')
              //   return h('c-dict-select', {
              //     props: {
              //       dictTypeCode: 'BOOLEANS',
              //       value: row.NEWisRedesign
              //     },
              //     on: {
              //       input: v => {
              //         this.$set(row, 'NEWisRedesign', v)
              //       }
              //     }
              //   })
              // } else {
              //   this.$set(row, 'isRedesign', '0')
              //   return h('c-dict-range-view', {
              //     props: {
              //       dictTypeCode: 'BOOLEANS',
              //       value: row.isRedesign
              //     }
              //   })
              // }
            }
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: '120'
          },
          {
            prop: 'state',
            label: '当前图纸状态',
            width: 120,
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            }
          },
          {
            prop: '',
            label: '操作',
            minWidth: 250,
            render: (h, row) => {
              // 2、进度为已完成时，操作只显示修改
              if (row.schedule === 'F') {
                return h('el-checkbox-group', {
                  class: 'operator',
                  props: {
                    value: row.taskHandleType
                  },
                  on: {
                    input: v => {
                      this.$set(row, 'taskHandleType', v)
                    },
                    change: v => {
                      this.checkTaskHandleType(v, row)
                    }
                  }
                }, [
                  h('el-checkbox', { props: { label: '0' }}, '修改')
                ]
                )
              } else {
                // 3、进度为非已完成，状态为“正常”时，操作显示修改、暂停、作废，
                // 且修改和暂停可同时选择但是作废不能同时选择
                // 4、进度为非已完成，状态为“申请暂停或异常暂停”时，
                // 操作只显示修改、恢复、作废，且修改和恢复可同时选择但是作废不能同时选择
                if (row.state === 'NORMAL') {
                  return h('el-checkbox-group', {
                    class: 'operator',
                    props: {
                      value: row.taskHandleType
                    },
                    on: {
                      input: v => {
                        this.$set(row, 'taskHandleType', v)
                      },
                      change: v => {
                        this.checkTaskHandleType(v, row)
                      }
                    }
                  }, [
                    h('el-checkbox', { props: { label: '0' }}, '修改'),
                    h('el-checkbox', { props: { label: '1' }}, '暂停'),
                    h('el-checkbox', { props: { label: '3' }}, '作废')
                  ]
                  )
                } else if (row.state === 'APPLY') {
                  return h('el-checkbox-group', {
                    class: 'operator',
                    props: {
                      value: row.taskHandleType
                    },
                    on: {
                      input: v => {
                        this.$set(row, 'taskHandleType', v)
                      },
                      change: v => {
                        this.checkTaskHandleType(v, row)
                      }
                    }
                  }, [
                    h('el-checkbox', { props: { label: '0' }}, '修改'),
                    h('el-checkbox', { props: { label: '2' }}, '恢复'),
                    h('el-checkbox', { props: { label: '3' }}, '作废')
                  ]
                  )
                } else if (row.state === 'ABNORMAL') { // 2022/11/29 （新增的）图纸状态【异常暂停】时，显示【修改、暂停、恢复、作废】
                  return h('el-checkbox-group', {
                    class: 'operator',
                    props: {
                      value: row.taskHandleType
                    },
                    on: {
                      input: v => {
                        this.$set(row, 'taskHandleType', v)
                      },
                      change: v => {
                        this.checkTaskHandleType(v, row)
                      }
                    }
                  }, [
                    h('el-checkbox', { props: { label: '0' }}, '修改'),
                    h('el-checkbox', { props: { label: '1' }}, '暂停'),
                    h('el-checkbox', { props: { label: '2' }}, '恢复'),
                    h('el-checkbox', { props: { label: '3' }}, '作废')
                  ]
                  )
                }
              }
              return h('span', '')
            }
          }
        ]
      },
      editTableData: []
    }
  },
  computed: {
    detail() {
      return concatObj(this.picDetail, this.taskDetail, this.wholeInfo, this.designDetail, this.shopDetail)
      // return { ...this.designDetail, ...this.taskDetail }
    },
    filtersCondition() {
      // 处理数据
    // 1.根据勾选的任务处理方式，下方显示不同的模块，“新增图纸”和“修改原有图纸”可同时勾选，
    // 但是“不变更现有图纸”与另外两个选项互斥，不能同时勾选；
    // 2.若选择“不影响现有图纸设计”，则直接显示提交按钮，提交后直接返回任务列表
    // 3.当任务类型为“设计变更 DESIGN_CHANGE ”，且是否重复设计为“是”时，只能选择“新增图纸”，
    // 不能选择其他两项；
    // 4.当任务类型为“设计申请 DESIGN_APPLICATION ”时，只能选择“新增图纸”，不能选择其他两项；
    // 5.当任务类型为“图纸触发 DRAWING_TRIGGER ”时，只能选择“新增图纸”，不能选择其他两项；
    // 6.当任务类型为“图纸暂停 DESIGN_PAUSE 、图纸恢复 DESIGN_REGAIN ”时，不能选择“新增图纸”
    // 7.任务类型为【施工图修改SG_UPDATES】时，任务处理方式为【修改图纸、不影响现有图纸】
    // 8.任务类型为【不复尺申请】，任务处理方式只显示不影响现有图纸
      const taskType = this.$route.query.taskType
      const haveRedesign = (this.$route.query.haveRedesign || '').toString()
      if (taskType === 'DESIGN_CHANGE' && haveRedesign === '1') {
        return 'CREATION UPDATES NO_PROCESSING'
      } else if ('DESIGN_APPLICATION DRAWING_TRIGGER'.includes(taskType)) {
        return 'CREATION'
      } else if ('DESIGN_PAUSE DESIGN_REGAIN'.includes(taskType)) {
        return 'UPDATES NO_PROCESSING'
      } else if (taskType === 'SG_UPDATES') {
        return 'UPDATES NO_PROCESSING'
      } else if (taskType === 'UNRESURVEY') {
        return 'CREATION UPDATES NO_PROCESSING'
      }
      return 'CREATION UPDATES NO_PROCESSING'
    },
    handleTypeList() {
      return this.TASK_HANDEL_WAY.filter(e => this.filtersCondition.includes(e.dictCode))
    },
    excludePicType() {
      const range = this.detail.designRange || this.detail.decorationRange || ''
      if (range === 'DOOR') {
        return ['GH', 'BC']
      } else if (range === 'STORES') {
        return ['PB']
      } else {
        return []
      }
    },
    // 图纸中 是否重复设计 是否可编辑
    isRedesignEditable() {
      return this.detail.taskType === 'DESIGN_CHANGE' && (this.detail.haveRedesign === '1' || this.detail.haveRedesign === 1)
    },
    addFiltersRaw() {
      const fr = [
        { key: 'enable', value: 1, operator: '=' },
        { key: 'dr', value: 0, operator: '=' }
      ]
      if (this.detail.taskType === 'DRAWING_TRIGGER') {
        if (this.picDetail.designSpace) {
          fr.push({ key: 'areaCode', value: `[${this.picDetail.designSpace}]`, operator: 'in' })
        }
      } else {
        if (this.designDetail.applySpecialZone) {
          fr.push({ key: 'areaCode', value: `[${this.designDetail.applySpecialZone}]`, operator: 'in' })
        }
      }
      return fr
    }
  },
  watch: {
    taskHandelWay: {
      handler(n, o) {
        this.checkHandleType(n, o)
      }
    }
  },
  created() {
    this.getHandleType()
    this.getDetail()
  },
  methods: {
    editabled(row) {
      const t = row.designRange || ''
      return t.includes('DOOR')
    },
    // 图纸修改 行能否编辑
    updateEditabled(row) {
      return row.designRange !== 'DOOR'
    },
    includeDesignRange(row) {
      const picType = row.picType
      const range = this.detail.designRange || this.detail.decorationRange || ''
      if (!picType) return range
      if (['GH', 'BC'].includes(picType)) {
        return range.replace(/\.?DOOR\.?/, '')
      } else if (['PB'].includes(picType)) {
        return range.replace(/\.?STORES\.?/, '')
      }
      return range
    },
    toString(v) {
      return typeof v === 'number' && /^\d+$/.test(v) ? v.toString() : v
    },
    // 处理修改图纸
    handlerChangeDraw(data) {
      // 2、进度为已完成时，操作只显示修改
      // 3、进度为非已完成，状态为“正常”时，操作显示修改、暂停、作废，
      // 且修改和暂停可同时选择但是作废不能同时选择
      // 4、进度为非已完成，状态为“申请暂停或异常暂停”时，
      // 操作只显示修改、恢复、作废，且修改和恢复可同时选择但是作废不能同时选择
      return data.map(e => {
        e.NEWdesignSpace = this.$split(e.designSpace)
        e.NEWdesignBizType = this.$split(e.designBizType)
        e.NEWpicTotalArea = e.picTotalArea
        e.NEWsoftwareSumArea = e.softwareSumArea
        e.NEWsuiteSumArea = e.suiteSumArea
        e.NEWnewBusinessAreaSummary = e.newBusinessAreaSummary
        e.NEWhaveEAndC = this.toString(e.haveEAndC)
        e.NEWeandCArea = e.eandCArea
        e.NEWisRedesign = this.toString(e.isRedesign)
        e.taskHandleType = this.$split(e.taskHandleType)
        e._key = Math.floor(Math.random() * 0xfffffff).toString(16)
        return e
      })
    },
    async getDetail() {
      await getShopDesignTaskInfo(this.$route.query.id).then(async res => {
        this.taskDetail = res.data
        this.taskHandelWay = typeof this.taskDetail.taskHandelWay === 'string' ? this.$split(this.taskDetail.taskHandelWay) : []
        // 门店信息
        shopConstructPage(res.data.constCode).then(res => {
          this.shopDetail = res.data.records.length > 0 ? res.data.records[0] : {}
        })

        // 图纸信息
        const spcl = res.data.shopDesignPictureChangeList || []
        const editTableData = this.handlerChangeDraw(spcl)
        const flag = (e) => `${e.picTaskCode}-${e.picTaskName}-${e.picType}`
        const flags = spcl.map(e => flag(e))
        if (this.taskDetail.taskType !== 'DRAWING_TRIGGER') {
          await postGetPicture(this.taskDetail.constCode).then(resPic => {
            editTableData.push(...this.handlerChangeDraw(resPic.data.records.map(e => { e.taskHandleType = ''; return e }).filter(e => !flags.includes(flag(e)))))
          })
        } else {
          await postGetPicturePage(this.taskDetail.sourceCode).then(resPic => {
            editTableData.push(...this.handlerChangeDraw(resPic.data.records.map(e => { e.taskHandleType = ''; return e }).filter(e => !flags.includes(flag(e)))))
          })
        }
        // 不这样表格输入框会有问题。。。。。。。
        this.editTableData = JSON.parse(JSON.stringify(editTableData))
        // 新增图纸
        const tableData = (res.data.shopDesignPictureDTOList || []).map(e => {
          e.NEWdesignSpace = this.$split(e.designSpace)
          e.NEWdesignBizType = this.$split(e.designBizType)
          // e.NEWdecorationType = this.$split(e.decorationType)
          e.NEWdecorationType = e.decorationType || ''
          e._key = Math.floor(Math.random() * 0xfffffff).toString(16)
          e.taskHandleType = this.$split(e.taskHandleType)
          return e
        })
        // 不这样表格输入不响应。。。。。。。
        this.tableData = JSON.parse(JSON.stringify(tableData))

        if (this.taskDetail.taskType === 'DRAWING_TRIGGER') {
          getPicturePage(this.taskDetail.sourceCode).then(data => {
            this.picDetail = data
          })
        }
        // 获取设计信息
        getShopDesignInfo(res.data.constCode).then(res => {
          this.designDetail = res.data
        })
      })
      if (this.taskDetail.taskType === 'DESIGN_CHANGE') {
        await basicsInfo(this.$route.query.id).then(res => {
          this.wholeInfo = res.data
        })
      } else {
        // 获取全部详情
        await getShopDesignTaskWholeInfo(this.$route.query.id).then(res => {
          this.wholeInfo = res.data
          if (this.taskHandelWay.length === 0 && typeof this.wholeInfo.taskHandelWay === 'string') {
            this.taskHandelWay = this.$split(this.wholeInfo.taskHandelWay)
          }
        })
      }
    },
    getHandleType() {
      SLMDict('TASK_HANDEL_WAY').then(res => {
        this.TASK_HANDEL_WAY = res.data
      })
    },
    checkHandleType(n, o) {
      if (n.length > o.length) {
        const nValue = n.filter(e => !o.includes(e))[0]
        if (nValue === 'NO_PROCESSING' && (n.includes('CREATION') || n.includes('UPDATES'))) {
          this.taskHandelWay = this.taskHandelWay.filter(e => !['CREATION', 'UPDATES'].includes(e))
        } else if (['CREATION', 'UPDATES'].includes(nValue) && n.includes('NO_PROCESSING')) {
          this.taskHandelWay = this.taskHandelWay.filter(e => e !== 'NO_PROCESSING')
        }
      }
    },
    selectionChange(v) {
      this.selections = v
    },
    editSelectionChange(v) {
      this.selections = v
    },
    tableRowKeyFun(row) {
      return row._key
    },
    addHandle() {
      const t = {
        picType: '',
        picTaskName: '',
        designRange: '',
        decorationType: '',
        designSpace: '',
        designBizType: '',
        picTotalArea: '',
        softwareSumArea: '',
        suiteSumArea: '',
        haveEAndC: '',
        eandCArea: '',
        newBusinessAreaSummary: '',
        isRedesign: this.isRedesignEditable ? this.$toString(this.detail.haveRedesign) : '',
        repeatDesignReason: this.isRedesignEditable ? this.detail.redesignReason : '',
        sourcePic: '',
        sourcePicName: '',
        designerCode: '',
        designerName: '',
        taskHandleType: ['4'],
        NEWdesignSpace: [],
        _key: Math.floor(Math.random() * 0xfffffff).toString(16)
      }
      // 3.新增图纸
      // 3.1.点击“新增图纸”，默认在列表首行新增，上方按钮变更为显示“保存”和“取消”，图纸编码自动生成，生成逻辑：
      // 设计范围+图纸类型+门店编码+日期（年月日）+两位流水
      // 3.2.当设计区域含成品时，成品面积、是否含成融定必填、是否含成融定为是时，成融定面积必填；
      // 当设计区域含全屋定制时，全屋定制面积必填，橱柜、卫浴、样板间区域控制逻辑相同
      // 3.3.来源图纸：
      // 3.3.1当任务类型为“图纸触发”，则来源图纸默认记录来源图纸的图纸任务编号；
      if (this.detail.taskType === 'DRAWING_TRIGGER') {
        t.sourcePic = this.detail.sourceCode
        t.sourcePicName = this.picDetail.picTaskName || this.picDetail.sourcePicName || ''
        t.sourcePicDisabled = false
        if (this.designDetail.designUnitCode === this.picDetail.designUnitCode) {
          t.designerCode = this.picDetail.designerCode
          t.designerName = this.picDetail.designerName
        }
      }
      this.tableData.unshift(t)
    },
    removeHandle() {
      // if (!this.singleJudge(this.selections, '删除', true)) {
      //   return
      // }
      // for (let i = 0; i < this.tableData.length; i++) {
      //   if (this.tableData[i].keyIndex === this.selections[0].keyIndex) {
      //     this.tableData.splice(i, 1)
      //     // break
      //   }
      // }
      const _keys = this.selections.map(e => e._key)
      this.tableData = this.tableData.filter(e => !_keys.includes(e._key))
    },
    cancelHandle() {
      this.$store.dispatch('views/goFirst')
    },
    async validate() {
      const data = { ...this.taskDetail }
      // data.taskHandelWay = this.taskHandelWay.join(',')
      // 3.2.当设计区域含成品时，成品面积 endProArea 、是否含成融定 haveEAndC 必填、是否含成融定为是时，
      // 成融定面积必填；当设计区域含全屋定制时，全屋定制面积必填，橱柜、卫浴、
      // 样板间区域控制逻辑相同
      const tableData = deepClone(this.tableData)
      if (this.taskHandelWay.includes('CREATION') && tableData.length === 0) {
        this.$message.warning(`新增图纸没有数据`)
        return Promise.reject('')
      }
      for (const r of tableData) {
        if (!this.$gtZero(r.picTotalArea)) {
          this.$message.warning(`请填写第${r.keyIndex + 1}行图纸总面积`)
          return Promise.reject('')
        }
        if (r.NEWdesignSpace.includes('Q014')) {
          if (!this.$gtZero(r.softwareSumArea)) {
            this.$message.warning(`请填写第${r.keyIndex + 1}行软体区总面积`)
            return Promise.reject('')
          }
        }
        if (r.NEWdesignSpace.includes('Q015')) {
          if (!this.$gtZero(r.suiteSumArea)) {
            this.$message.warning(`请填写第${r.keyIndex + 1}行套房区总面积`)
            return Promise.reject('')
          }
        }
        if (r.NEWdesignSpace.includes('Q014') || r.NEWdesignSpace.includes('Q015')) {
          if (r.haveEAndC === '' || r.haveEAndC === undefined) {
            this.$message.warning(`请选择第${r.keyIndex + 1}行是否含成融定`)
            return Promise.reject('')
          }
          if (r.haveEAndC.toString() === '1' && !this.$gtZero(r.eandCArea)) {
            this.$message.warning(`请填写第${r.keyIndex + 1}行成融定面积`)
            return Promise.reject('')
          }
        }
        // 设计师
        if (!r.designerCode) {
          this.$message.warning(`请选择第${r.keyIndex + 1}行设计师`)
          return Promise.reject('')
        }
        // Q003 Q004 Q005
        // const newB = ['Q002', 'Q003', 'Q004', 'Q005'].includes(r.designSpace)
        const newB = (r.NEWdesignSpace || []).some(e => ['Q002', 'Q003', 'Q004', 'Q005'].includes(e))
        if (newB && !this.$gtZero(r.newBusinessAreaSummary)) {
          this.$message.warning(`请填写第${r.keyIndex + 1}行新业务总面积`)
          return Promise.reject('')
        }
        for (const k of Object.keys(r)) {
          if (/^NEW/.test(k)) {
            if (r[k] instanceof Array) {
              r[k.replace(/^NEW/, '')] = (r[k] || []).join(',')
            } else {
              r[k.replace(/^NEW/, '')] = r[k]
            }
            delete r[k]
          }
        }

        if (r.picType === '') {
          this.$message.warning(`请选择第${r.keyIndex + 1}行图纸类型`)
          return Promise.reject('')
        }
        if (r.picTaskName === '') {
          this.$message.warning(`请填写第${r.keyIndex + 1}行图纸名称`)
          return Promise.reject('')
        }
        if (r.designRange === '') {
          this.$message.warning(`请选择第${r.keyIndex + 1}行设计范围`)
          return Promise.reject('')
        }
        if (r.decorationType === '') {
          this.$message.warning(`请选择第${r.keyIndex + 1}行装修形式`)
          return Promise.reject('')
        }
        if (r.designRange === 'STORES') {
          if (r.designSpace === '') {
            this.$message.warning(`请选择第${r.keyIndex + 1}行设计区域`)
            return Promise.reject('')
          }
          // if (r.designBizType === '') {
          //   this.$message.warning(`请选择第${r.keyIndex + 1}行设计业务类型`)
          //   return Promise.reject('')
          // }
        }

        if (r.designRange === 'DOOR') {
          'designSpace designBizType softwareSumArea suiteSumArea haveEAndC eandCArea newBusinessAreaSummary'.split(' ').forEach(e => {
            r[e] = ''
          })
        }
        if (this.$isTrue(r.haveEAndC, '0', 0)) {
          r.eandCArea = ''
        }
        // 3.3.2若任务类型为“重复设计”，则手工选择“来源图纸”，可多选，需控制必填，提交时，
        // 检查若新增图纸未包含来源图纸，
        // 则提示：重复设计任务必须关联来源图纸；

        if (this.detail.taskType === 'DESIGN_CHANGE') {
          if (this.$isTrue(r.isRedesign, '1', 1) && !r.sourcePic) {
            this.$message.warning(`第${r.keyIndex + 1}行重复设计任务必须关联来源图纸！`)
            return Promise.reject('')
          }
        }
        // 3.3.3若图纸类型为“施工图”，且设计范围为“卖场”（门头的来源图纸不做强制要求），
        // 则手工选择来源图纸，可多选，
        // 但需控制至少包含一个摆场图，提交时检查，
        // 若新增施工图类型的图纸未关联摆场图，则系统提示：当图纸类型为施工图时，来源图纸至少关联一份摆场图；
        // 后期添加--------
        // 增施工图，是否重复设计为“否”时，来源图纸必须关联一个摆场图
        // 新增施工图，是否重复设计为“是”时，来源图纸不控制必须关联一个摆场图
        if (this.$isTrue(r.isRedesign, '0', 0) && r.picType === 'SG' && r.designRange === 'STORES' && !r.sourcePic.includes('BC')) {
          this.$message.warning(`第${r.keyIndex + 1}行当图纸类型为施工图时，来源图纸至少关联一份摆场图`)
          return Promise.reject('')
        }
        delete r._key
      }
      if (['DRAWING_TRIGGER', 'DESIGN_APPLICATION'].includes(this.detail.taskType)) {
        const designRange = this.$split(this.detail.designRange || this.detail.decorationRange)
        let td = tableData.map(e => e.designRange).join(',')
        if (this.taskHandelWay.includes('CREATION') && !this.$eqSet(designRange, td)) {
          this.$message.warning(`任务来源设计范围集合与新增图纸设计范围集合不一致！`)
          return Promise.reject('')
        }
        if (this.detail.designRange.includes('STORES')) {
          const designSpace = this.$split(this.detail.applySpecialZone || this.picDetail.designSpace)
          td = tableData.map(e => e.designSpace).join(',')
          if (this.taskHandelWay.includes('CREATION') && !this.$eqSet(designSpace, td)) {
            this.$message.warning(`任务来源设计区域集合与新增图纸设计区域集合不一致！`)
            return Promise.reject('')
          }

          const decorationType = this.$split(this.detail.decorationType || this.detail.decorationForm || this.shopDetail.decorationForm)
          td = tableData.map(e => e.decorationType).join(',')
          if (this.taskHandelWay.includes('CREATION') && !this.$eqSet(decorationType, td)) {
            this.$message.warning(`任务来源装修形式集合与新增图纸装修形式集合不一致！`)
            return Promise.reject('')
          }
        }
      }

      tableData.forEach(e => {
        e.taskHandleType = e.taskHandleType.join(',')
      })
      data.shopDesignPictureDTOList = tableData
      // 暂停时间、预计恢复时间、实际恢复时间、是否超期未恢复
      const editTableData = deepClone(this.editTableData)
      if (this.taskHandelWay.includes('UPDATES') && editTableData.length === 0) {
        this.$message.warning(`修改图纸没有数据！`)
        return Promise.reject('')
      }
      if (this.taskHandelWay.includes('UPDATES') && editTableData.every(e => (e.taskHandleType || []).filter(t => t !== '6' && t !== 6).length === 0)) {
        this.$message.warning(`修改图纸至少操作一条数据！`)
        return Promise.reject('')
      }
      // for (const r of editTableData) {
      for (let i = 0; i < editTableData.length; i++) {
        const r = editTableData[i]
        for (const k of Object.keys(r)) {
          if (/^NEW/.test(k)) {
            if (!r.taskHandleType.includes('0')) {
              delete r[k]
              continue
            }
            if (r[k] instanceof Array) {
              r[k.replace(/^NEW/, '')] = (r[k] || []).join(',')
            } else {
              r[k.replace(/^NEW/, '')] = r[k]
            }
            delete r[k]
          }
        }
        // 校验成融定面积
        // if (r.taskHandleType.includes('0')) {
        //   if (!this.updateEditabled(r)) {
        //     if (!this.$gtZero(r.picTotalArea)) {
        //       this.$message.warning(`请填写第${r.keyIndex + 1}行图纸总面积`)
        //       return Promise.reject('')
        //     }
        //   } else {
        //     if (r.designSpace === '') {
        //       this.$message.warning(`请选择第${r.keyIndex + 1}行设计区域`)
        //       return Promise.reject('')
        //     }
        //     if (r.designBizType === '') {
        //       this.$message.warning(`请选择第${r.keyIndex + 1}行设计业务类型`)
        //       return Promise.reject('')
        //     }

        //     if (r.designSpace.includes('Q014')) {
        //       if (!this.$gtZero(r.softwareSumArea)) {
        //         this.$message.warning(`请填写第${r.keyIndex + 1}行软体区总面积`)
        //         return Promise.reject('')
        //       }
        //     }
        //     if (r.designSpace.includes('Q015')) {
        //       if (!this.$gtZero(r.suiteSumArea)) {
        //         this.$message.warning(`请填写第${r.keyIndex + 1}行套房区总面积`)
        //         return Promise.reject('')
        //       }
        //     }
        //     if (r.designSpace.includes('Q014') || r.designSpace.includes('Q015')) {
        //       if (r.haveEAndC === '' || r.haveEAndC === undefined) {
        //         this.$message.warning(`请选择第${r.keyIndex + 1}行是否含成融定`)
        //         return Promise.reject('')
        //       }
        //       if (r.haveEAndC.toString() === '1' && !this.$gtZero(r.eandCArea)) {
        //         this.$message.warning(`请填写第${r.keyIndex + 1}行成融定面积`)
        //         return Promise.reject('')
        //       }
        //     }
        //     // Q003 Q004 Q005
        //     // const newB = ['Q002', 'Q003', 'Q004', 'Q005'].includes(r.designSpace)
        //     const newB = this.$split(r.designSpace).some(e => ['Q002', 'Q003', 'Q004', 'Q005'].includes(e))
        //     if (newB && !this.$gtZero(r.newBusinessAreaSummary)) {
        //       this.$message.warning(`请填写第${r.keyIndex + 1}行新业务总面积`)
        //       return Promise.reject('')
        //     }
        //   }
        // }
        if (r.haveEAndC === 0 || r.haveEAndC === '0') {
          r.eandCArea = ''
        }
        if (r.taskHandleType.includes('1')) {
          const nowTime = this.$parseTime(new Date())
          r.stopTime = nowTime
          r.expectRestoreTime = nowTime
          r.actualRestoreTime = nowTime
          r.isOverdueUnrestore = 0
        } else if (r.taskHandleType === undefined || r.taskHandleType === '' || r.taskHandleType === null) {
          r.taskHandleType = ['6']
        }
      }
      editTableData.forEach(e => {
        e.taskHandleType = e.taskHandleType.join(',')
      })
      data.shopDesignPictureChangeList = editTableData
      data.taskHandelWay = (this.taskHandelWay || []).join(',')
      return data
    },
    submitHandle() {
      return this.validate().then(data => {
        return putTaskHandle(data).then(res => {
          this.$message.success('提交成功！')
          this.$store.dispatch('views/goFirst')
        })
      })
    },
    async toSource(v) {
      const { path, query } = await getPath(this.detail.taskType, v)
      if (!path) return
      query ? query.time = new Date().getTime() : ''
      this.$store.dispatch('views/goPage', { path, query })
    },
    // 作废不能和其他值一起选
    checkTaskHandleType(v, row) {
      const taskHandleType = row.taskHandleType
      if (v.length > 1) {
        if (v.indexOf('3') === 0) {
          taskHandleType.splice(0, 1)
        } else if (v.indexOf('3') === v.length - 1) {
          this.$set(row, 'taskHandleType', ['3'])
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.handle{
  padding-top: 12px;
}
</style>
<style lang="scss">
.operator{
    display: flex;
    align-items: center;
    .el-checkbox{
      display: flex;
      align-items: center;
    }
  }
.handle {
  .el-select__tags .el-tag{
    display: inline-block !important;
  }
}
</style>
